<script setup lang="ts">
definePageMeta({
  layout: 'default',
})
const router = useRouter()
const route = useRoute()
const userInfo = useUserInfoState()

const items = [{
    key: 'noPay',
    label: '未付款',
}, {
    key: 'payed',
    label: '已付款',
}, {
    key: 'search',
    label: '查询订单',
}];

const oid = ref('')

const status = ref(0)

const page = ref(0)
const total = ref(0)
const orderList = ref<any[]>([])

const getOrders = async () => { 
    const { data:res } = await useFetchPost('/api/Orders/getOrders', {
      oid: oid.value,
      status: status.value,
      page: page.value + 1,
    });
    orderList.value.push(...res.value.data.list)
    console.log('orderList', orderList.value)
    total.value = res.value.data.totalRow
    page.value++
}

const orderInfo = ref()

const isSubmit = ref()
const msg = ref()
// 关闭弹窗
const closeModal = () => {
  isSubmit.value = false
}

const getOrder = async () => { 
    const { data:res } = await useFetchPost('/api/Orders/getOrders', {
      oid: oid.value,
      status: status.value,
    });
    orderInfo.value = res.value.data
}

onMounted(() => {
  getOrders()
})

const onChange = (index: any) => {
    page.value = 0
    oid.value = ''
    orderList.value = []
    if (index === 0) {
    status.value = 0
    getOrders()
    } else if (index === 1) {
    status.value = 1
    getOrders()
    }
}

const searchOrder = async () => { 
    if (oid.value === '' || oid.value === null || oid.value === undefined) {
        return;
    }
    getOrder()
}

const { arrivedState } = useScroll(useTemplateRef('scrollRef'))

watch(() => arrivedState.bottom, (value) => {
  if (value && orderList.value.length < total.value) {
    getOrders()
  }
})

const goToOrderDetail = (order:any) => {
    ///yunshi/result?oid=202506052118492876
    if (order.status != 1) {
        msg.value = "订单未支付"
        isSubmit.value = true
        return
    }
    if (order.type != 4 &&  order.type != 5 && order.type != 6) {
        msg.value = "仅运势，风水，取名订单才可查看"
        isSubmit.value = true
        return
    }
    if (order.type == 4) {
        router.push('/yunshi/result?oid=' + order.oid)
    }
    if (order.type == 5) {
        router.push('/fengshui/result?oid=' + order.oid)
    }
    if (order.type == 6) {
        router.push('/quming/result?oid=' + order.oid)
    }
}
</script>


<template>
  <div class="w-full min-h-screen relative">
    <Header />
    <div class="w-full h-full flex justify-center items-center">
        <img src="/assets/images/orders-1.gif" alt="">
    </div>
    <div ref="scrollRef" class="h-screen overflow-y-auto">
        <UTabs :items="items" class="w-full" @change="onChange">
            <template #item="{ item }">
                <div v-if="item.key === 'noPay'" class="space-y-1">
                    <div v-for="order in orderList" :key="order.id">
                        <div class="bg-blue/10 px-5 py-5 flex justify-between" @click="goToOrderDetail(order)">
                            <div>
                                <span>订单编号：{{ order.oid }}</span>
                            </div>
                            <div class="text-white">
                                <span v-if="order.type==1" class="bg-[#FF8C00]  p-1 rounded">祈福</span>
                                <span v-if="order.type==2" class="bg-[#1E90FF] p-1 rounded">上香</span>
                                <span v-if="order.type==3" class="bg-[#B4CDCD] p-1 rounded">求符</span>
                                <span v-if="order.type==4" class="bg-[#CD2626] p-1 rounded">运势</span>
                                <span v-if="order.type==5" class="bg-[#8B5A00] p-1 rounded">风水</span>
                                <span v-if="order.type==6" class="bg-[#6B8E23] p-1 rounded">取名</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-else-if="item.key === 'payed'" class="space-y-1">
                    <div v-for="order in orderList" :key="order.id">
                        <div class="bg-blue/10 px-5 py-5 flex justify-between" @click="goToOrderDetail(order)">
                            <div>
                                <span>订单编号：{{ order.oid }}</span>
                            </div>
                            <div class="text-white">
                                <span v-if="order.type==1" class="bg-[#FF8C00]  p-1 rounded">祈福</span>
                                <span v-if="order.type==2" class="bg-[#1E90FF] p-1 rounded">上香</span>
                                <span v-if="order.type==3" class="bg-[#B4CDCD] p-1 rounded">求符</span>
                                <span v-if="order.type==4" class="bg-[#CD2626] p-1 rounded">运势</span>
                                <span v-if="order.type==5" class="bg-[#8B5A00] p-1 rounded">风水</span>
                                <span v-if="order.type==6" class="bg-[#6B8E23] p-1 rounded">取名</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-else-if="item.key === 'search'" class="space-y-10">
                    <div class="flex items-center justify-around w-[90%] left-0 right-0 mx-auto">
                        <UInput color="blue" class="w-[70%]" v-model="oid" placeholder="请输入订单号" />
                        <UButton class="w-[20%] flex items-center justify-center" color="sky" @click="searchOrder">搜索</UButton>
                    </div>
                    <div v-if="orderInfo" class="bg-blue/10 px-5 py-5 flex justify-between" @click="goToOrderDetail(orderInfo)">
                        <div>
                            <span>订单编号：{{ orderInfo?.oid }}</span>
                        </div>
                        <div class="text-white">
                                <span v-if="orderInfo.type==1" class="bg-[#FF8C00]  p-1 rounded">祈福</span>
                                <span v-if="orderInfo.type==2" class="bg-[#1E90FF] p-1 rounded">上香</span>
                                <span v-if="orderInfo.type==3" class="bg-[#B4CDCD] p-1 rounded">求符</span>
                                <span v-if="orderInfo.type==4" class="bg-[#CD2626] p-1 rounded">运势</span>
                                <span v-if="orderInfo.type==5" class="bg-[#8B5A00] p-1 rounded">风水</span>
                                <span v-if="orderInfo.type==6" class="bg-[#6B8E23] p-1 rounded">取名</span>
                            </div>
                    </div>
                    <div v-else class="bg-blue/10 px-5 py-5 flex justify-center">
                        <span>订单为空</span>
                    </div>
                    <div class="w-full h-full flex justify-center items-center">
                        <img src="/assets/images/orders-2.png" alt="">
                    </div>
                    <div class="w-full h-full flex justify-center items-center">
                        <img src="/assets/images/orders-3.png" alt="">
                    </div>
                </div>
            </template>
        </UTabs>
    </div>
    <TipModal
      v-model="isSubmit"
      title="提示"
      :message="msg"
      @close="closeModal"
    />
  </div>
</template>
<style setup> 
  
</style>
